<div class="portlet box purple">
    <div class="portlet-title">
        <div class="caption"><i class="icon-reorder"></i>Шүүлт</div>
        <div class="tools">
            <a href="javascript:;" class="collapse" id="filter_collapse"></a>
        </div>
    </div>
    <div class="portlet-body form">
        <form id="filter_form" method="get" class="form-horizontal">
            <div class="row-fluid">
                <div class="span2"></div>

                <div class="span4">
                    <div class="control-group">
                        <label class="control-label">Зарлагын огноо</label>
                        <div class="controls">
                            <div id="date_range" class="btn">
                                <i class="icon-calendar"></i>&nbsp;<span></span>
                                <b class="caret"></b>
                                <input type="hidden" name="dateBegin" id="date_begin" value="<?php echo $dateBegin ?>"/>
                                <input type="hidden" name="dateEnd" id="date_end" value="<?php echo $dateEnd ?>"/>
                            </div>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">Салбар</label>
                        <div class="controls">
                            <select name="storeId" id="storeId" class="m-wrap">
                                <option value="0">[Бүгд]</option>
                                <?php foreach ($stores AS $i => $v): ?>
                                    <option value="<?php echo $i ?>" <?php echo $i == $storeId ? 'selected' : '' ?>><?php echo $v ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">Ажилтан</label>
                        <div class="controls">
                            <select name="userId" id="userId" class="m-wrap">
                                <option value="0">[Бүгд]</option>
                                <?php foreach ($users AS $i => $v): ?>
                                    <option value="<?php echo $i ?>" <?php echo $i == $userId ? 'selected' : '' ?>><?php echo $v ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="span4">
                    <div class="control-group">
                        <label class="control-label">Ангилал</label>
                        <div class="controls">
                            <select name="categoryId" id="categoryId" class="m-wrap">
                                <option value="0">[Бүгд]</option>
                                <?php foreach ($categories AS $i => $v): ?>
                                    <option value="<?php echo $i ?>" <?php echo $i == $categoryId ? 'selected' : '' ?>><?php echo $v ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">Бараа</label>
                        <div class="controls">
                            <select name="productId" id="productId" class="m-wrap">
                                <option value="0">[Бүгд]</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="span2"></div>
            </div>



            <div class="form-actions">
                <div class="offset4">
                    <button type="submit" class="btn purple"><i class="icon-filter icon-white"></i> Шүүх</button>
                    <button type="button" class="btn" onclick="$('#filter_form')[0].reset()">Цэвэрлэх</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <div id="transactionsContainer" style="clear:both"></div>
    </div>
</div>

<div class="row-fluid">
    <div class="span2 offset10">
        <table class="table table-bordered table-hover">
            <tr>
                <td><b>Нийт</b></td>
                <td><?php echo number_format($dataSummary['total']) ?>₮</td>
            </tr>
            <tr>
                <td><b>Нийт(ш)</b></td>
                <td><?php echo $dataSummary['quantity'] ? $dataSummary['quantity'] : '0'; ?></td>
            </tr>
        </table>
    </div>
</div>
<br/>

<script>
    $(function() {
        params = getUrlParams();

        dateBegin = '<?php echo $dateBegin ?>';
        dateEnd = '<?php echo $dateEnd ?>';

        $('#date_range').daterangepicker({
            ranges: {
                'Өнөөдөр': ['today', 'today'],
                'Өчигдөр': ['yesterday', 'yesterday'],
                'Сүүлийн 7 хоног': [Date.today().add({
                        days: -6
                    }), 'today'],
                'Сүүлийн 30 хоног': [Date.today().add({
                        days: -30
                    }), 'today'],
                'Энэ сар': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
                'Өнгөрсөн сар': [Date.today().moveToFirstDayOfMonth().add({
                        months: -1
                    }), Date.today().moveToFirstDayOfMonth().add({
                        days: -1
                    })]
            },
            opens: (App.isRTL() ? 'left' : 'right'),
            format: 'yyyy-MM-dd',
            separator: ' - ',
            startDate: dateBegin,
            endDate: dateEnd,
            minDate: '01/01/2012',
            maxDate: '12/31/2014',
            locale: {
                applyLabel: 'Сонгох',
                fromLabel: 'эхний',
                toLabel: 'сүүлийн',
                customRangeLabel: 'Өөрөө сонгох',
                daysOfWeek: ['Бү', 'Да', 'Мя', 'Лх', 'Пү', 'Ба', 'Ха'],
                monthNames: ['1-р сар', '2-р сар', '3-р сар', '4-р сар', '5-р сар', '6-р сар', '7-р сар', '8-р сар', '9-р сар', '10-р сар', '11-р сар', '12-р сар'],
                firstDay: 1
            },
            showWeekNumbers: true,
            buttonClasses: ['btn-danger']
        },
        function(start, end) {
            $('#date_range span').html(start.toString('yyyy-MM-dd') + ' - ' + end.toString('yyyy-MM-dd'));
            $('#date_begin').val(start.toString('yyyy-MM-dd'));
            $('#date_end').val(end.toString('yyyy-MM-dd'));
        });

        $('#date_range span').html(dateBegin + ' - ' + dateEnd);

    });

    function categoryChanged() {
        c = $(this).val();
        if (c > 0) {
            $.ajax({
                url: '<?php echo $urlProduct ?>?category_id=' + c,
                success: function(d) {
                    values = $.parseJSON(d);
                    if ($.isEmptyObject(values)) {
                        $('#productId').html('<option value="0">[Ангилалд бараа алга]</option>');
                    } else {
                        $('#productId').html('<option value="0">[Бүгд]</option>');
                        $.each(values, function(i, v) {
                            if (i == <?php echo $productId ?>) {
                                $('#productId').append('<option value="' + i + '" selected="selected">' + v + '</option>');
                            } else {
                                $('#productId').append('<option value="' + i + '">' + v + '</option>');
                            }
                        });
                    }
                }
            });
        } else {
            $('#productId').html('<option value="0">[Бүгд]</option>');
        }
    }

    $(function() {
        $('#categoryId').change(categoryChanged);
        $('#categoryId').change();

        $('#transactionsContainer').jtable({
            title: 'Зарлагын дэлгэрэнгүй жагсаалт',
            paging: true, //Enable paging
            pageSize: 20,
            sorting: true, //Enable sorting
            defaultSorting: 't.id ASC',
            columnResizable: false,
            actions: {
                listAction: '<?php echo $urlTable ?>'
            },
            toolbar: {
                items: [{
                        tooltip: 'Хайлтын үр дүнг Excel хэлбэрээр татаж авах',
                        icon: '/images/icon_excel.png',
                        text: 'Excel-ээр авах',
                        click: function() {
                            document.location.href = '<?php echo $urlExcel ?>';
                        }
                    }]
            },
            fields: {
                order_id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                order_date: {
                    title: 'Огноо',
                    type: 'date',
                    displayFormat: 'yy-mm-dd',
                    width: '5%'
                },
                store_name: {
                    title: 'Салбар',
                    width: '8%'
                },
                username: {
                    title: 'Ажилтан',
                    width: '7%'
                },
                total_price: {
                    title: 'Нийт үнэ',
                    width: '5%'
                },
                payments: {
                    title: 'Төлбөр',
                    sorting: false,
                    display: function(data) {
                        str = '';
                        if (data.record.payments) {
                            payments = $.parseJSON('{' + data.record.payments + '}');
                            $.each(payments, function(i, v) {
                                if (i == <?php echo TransactionTable::PAYMENT_METHOD_CASH ?>) {
                                    method = 'Бэлэн';
                                } else if (i == <?php echo TransactionTable::PAYMENT_METHOD_CARD ?>) {
                                    method = 'Карт';
                                }
                                str += '<p><b>' + method + ':</b> ' + v + '</p>';
                            });
                        }
                        return str;
                    }
                },
                cat_name: {
                    title: 'Ангилал',
                    width: '5%'
                },
                prod_name: {
                    title: 'Бараа',
                    width: '5%'
                },
                qty: {
                    title: 'Тоо',
                    width: '5%'
                },
                price: {
                    title: 'Үнэ',
                    width: '5%'
                },
                order_type: {
                    title: 'Хаашаа',
                    sorting: false,
                    width: '5%'
                },
                ordered_to: {
                    title: 'Хэн рүү',
                    sorting: false,
                    width: '5%'
                },
                order_created_at: {
                    title: 'Үүсгэсэн огноо',
                    width: '5%'
                },
                order_updated_at: {
                    title: 'Өөрчилсөн огноо',
                    width: '5%'
                }
            }
        });

        $('#transactionsContainer').jtable('load');
    });
</script>
